<template>
    <div>
        <div>
            <img class="dt" src="../../assets/img_chanpin/datu.jpg" alt="">
            <!-- 小导航 -->
            <div class="xdh">
                <div class="center">
                    <div>
                        <div :class="{ active: z == 0 }" @click="queryByType(0)">
                            <a>糕点系列</a>
                        </div>
                        <div :class="{ active: z == 1 }" @click="queryByType(1)">
                            <a>休闲食品</a>
                        </div>
                        <div :class="{ active: z == 2 }" @click="queryByType(2)">
                            <a>节日食品</a>
                        </div>
                        <div :class="{ active: z == 3 }" @click="queryByType(3)">
                            <a>面包主食</a>
                        </div>
                        <div :class="{ active: z == 4 }" @click="queryByType(4)">
                            <a>坚果系列</a>
                        </div>
                        <div :class="{ active: z == 5 }" @click="queryByType(5)">
                            <a>速冻食品</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="conte">

                <!-- 面包屑导航 -->
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item>首页</el-breadcrumb-item>
                    <el-breadcrumb-item>产品</el-breadcrumb-item>
                    <el-breadcrumb-item>{{type[z]}}</el-breadcrumb-item>
                </el-breadcrumb>
                <!-- <div class="xzq">
                <el-select class="xzq1" v-model="value" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-select class="xzq2" v-model="value1" placeholder="请选择">
                    <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-input class="shuru" v-model="input" placeholder="请输入内容"></el-input>
                <el-button class="btn" type="warning" plain>筛选</el-button>
            </div> -->
                
                <!-- 产品列表 -->
                <div class="chanpinliebiao">
                    <div class="biaoti">
                        <img :src="img[z]" alt="">
                        <a href="#">了解更多</a>
                    </div>
                    <ul class="neirong">
                        <li v-for="item in chanpin" :key="item.id">
                            <img class="logo" src="../../assets/img_chanpin/dhxlogo.jpg" alt="">
                            <img class="tupian" :src="item.img" alt="">
                            <div class="touming">
                                <p class="biaoti">{{ item.name }}</p>
                                <p class="neirong">{{ item.title }}</p>
                                <div class="qingjin" @click="gocpxq(item.id)">
                                    <a>请进</a>
                                </div>
                            </div>
                        </li>
                        <!-- <li>
                            <img class="logo" src="../../assets/img_chanpin/dhxlogo.jpg" alt="">
                            <img class="tupian" src="../../assets/img_chanpin/gdxlcp2.jpg" alt="">
                            <div class="touming">
                                <p class="biaoti">牛舌饼</p>
                                <p class="neirong">口感酥松绵软，馅心细腻油润，味道醇美。</p>
                                <div class="qingjin">
                                    <a href="#">请进</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <img class="logo" src="../../assets/img_chanpin/dhxlogo.jpg" alt="">
                            <img class="tupian" src="../../assets/img_chanpin/gdxlcp3.jpg" alt="">
                            <div class="touming">
                                <p class="biaoti">黑麻椒盐饼</p>
                                <p class="neirong">饼皮金黄，饼面沾满黑芝麻，粒粒饱满，麻香四溢，口口留香，层层酥脆，咸甜......</p>
                                <div class="qingjin">
                                    <a href="#">请进</a>
                                </div>
                            </div>
                        </li> -->
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import httpApi from '@/myaxios';

export default {
    data() {
        return {
            types: this.$route.params.type,
            type: ['糕点系列', '休闲食品', '节日食品', '面包主食', '坚果系列', '速冻食品'],
            img: ['http://www.daoxiangcun.cn/UpLoadFile/Images/2017/3/10/10563671634cbaa9f-f.jpg',
                'http://www.daoxiangcun.cn/UpLoadFile/Images/2017/3/10/1056453111ce0f3d3-8.jpg',
                'http://www.daoxiangcun.cn/UpLoadFile/Images/2017/3/10/1056561199b8940eb-b.jpg',
                'http://www.daoxiangcun.cn/UpLoadFile/Images/2017/3/10/105744002a9c4270-4.jpg',
                'http://www.daoxiangcun.cn/UpLoadFile/Images/2017/3/10/11535404c5e8840e-9.jpg',
                'http://www.daoxiangcun.cn/UpLoadFile/Images/2017/3/10/105727431d17cb657-5.jpg'],
            chanpin: [],
            z: 0,
            options: [{
                value: '选项1',
                label: '糕点系列'
            }, {
                value: '选项2',
                label: '休闲食品'
            }],
            options1: [{
                value: '选项1',
                label: '散点'
            }, {
                value: '选项2',
                label: '礼盒'
            }],
            value: '',
            form: {
                type1: "",
                type2: "",
                name: ""
            },
            type1: [],
            type2: []
        }
    },
    methods: {
        queryByType(i) {
            this.$route.params.type = i
            this.z = i
            httpApi.commodity.selectLike({ type1: this.type[this.z] }).then(res => {
                this.chanpin = res.data
            })
        },
        gocpxq(z) {
            this.$router.push('/home/cpxq/' + z)
        },
        queryByName(params) {
      console.log(params);
      this.type2 = []
      httpApi.commodity.queryByTypeName({ name: params }).then(res => {
        for (let i = 0; i <= res.data[0].type.length; i++) {
          this.type2.push(res.data[0].type[i].name)
        }
      })
    },
     //通过类型查询或者名称模糊查询
    //  select() {
    //   // console.log(this.form);
    //   if (this.form.type2 == "" && this.form.type1 == "" && this.form.name == "") {
    //     httpApi.commodity.queryCPAll().then(res => {
    //       this.chanpin = res.data
    //       console.log(res.data);
    //     })
    //   } else if (this.form.type1 != "" && (this.form.type2 == "" && this.form.name == "")) {
    //     this.chanpin = []
    //     httpApi.commodity.selectLike({ type1: this.form.type1 }).then(res => {
    //       // console.log(res);
    //       this.chanpin = res.data
    //     })
    //   } else if ((this.form.type2 != "" && this.form.type1 != "") && this.form.name == "") {
    //     this.chanpin = []
    //     httpApi.commodity.selectLike({ type1: this.form.type1, type2: this.form.type2 }).then(res => {
    //       console.log(res);
    //       this.chanpin = res.data
    //     })
    //   } else if (this.form.type2 != "" && this.form.type1 != "" && this.form.name != "") {
    //     this.chanpin = []
    //     httpApi.commodity.selectLike(this.form).then(res => {
    //       console.log(res);
    //       this.chanpin = res.data
    //     })
    //   }else if(this.form.name != "" && (this.form.type2 == "" && this.form.type1 == "")){
    //     this.chanpin = []
    //     httpApi.commodity.selectLike({name:this.form.name}).then(res => {
    //       console.log(res);
    //       this.chanpin = res.data
    //     })
    //   }
    // }
    },
    mounted() {
        httpApi.commodity.selectLike({ type1: this.type[this.types] }).then(res => {
            // console.log(res);
            this.chanpin.push(res.data)
        })
        console.log(this.chanpin);
        httpApi.commodity.queryAll().then(res => {
    //   console.log("查询所有产品类型", res.data);
    //   for (let i = 0; i <= res.data.length; i++) {
    //     this.type1.push(res.data[i].name)
    //   }
    })
    },
    updated() {
        this.queryByType(this.$route.params.type)
    }
}
</script>

<style lang="scss" scoped>
div {
    background-color: #FCF9F0;



    .dt {
        margin-top: -8px;
        width: 100%;
    }

    >.xdh {
        background-color: #E6DFC9;
        margin: 0;
        padding: 0;
        position: relative;
        top: -8px;

        >.center {
            width: 1200px;
            margin: 0 auto;

            >div {
                display: flex;
                height: 52px;
                background-color: #E6DFC9;
                padding: 0;

                >div {
                    width: 13%;
                    background-color: transparent;

                    >a {
                        text-decoration: none;
                        color: #000;
                        font-size: 20px;
                        line-height: 52px;
                    }

                    &.active {
                        color: #fff;
                        background-color: #CEAF59;

                        a {
                            color: #fff;
                        }
                    }
                }

            }

        }

    }

    .conte {
        width: 1200px;
        margin: 0 auto;
        padding-top: 10px;
        padding-bottom: 50px;
        ::v-deep .demo-ruleForm{
            margin: 20px 0;
        }
        .xzq {
            width: 100%;
            display: flex;
            margin-bottom: 20px;
            margin-top: 20px;
        }

        .xzq1 {
            width: 340px;
            margin-right: 10px;
        }

        .xzq2 {
            width: 340px;
            margin-right: 10px;
        }

        .shuru {
            width: 340px;
            margin-right: 10px;
        }

        .btn {
            width: 150px;
        }

        >.chanpinliebiao {
            >.biaoti {
                background-image: url('../../assets/img_chanpin/bj1.jpg');
                background-size: 100% 100%;
                width: 100%;
                height: 100px;
                position: relative;
                margin: 15px 0;

                >img {
                    position: absolute;
                    top: 28px;
                    left: 42%;
                }

                >a {
                    text-decoration: none;
                    color: #CEAF59;
                    font-size: 12px;
                    position: absolute;
                    right: 3%;
                    bottom: 30%;

                    &:hover {
                        color: red;
                    }
                }
            }

            >.neirong {
                display: flex;
                list-style: none;
                padding: 0;
                flex-wrap: wrap;

                >li {
                    width: 30%;
                    position: relative;
                    margin: 15px;
                    height: 15vw;

                    >.logo {
                        position: absolute;
                        left: 5%;
                    }

                    >.tupian {
                        width: 100%;
                        height: 100%;
                    }

                    >.touming {
                        position: absolute;
                        bottom: 0;
                        background-color: rgba(0, 0, 0, .4);
                        width: 100%;
                        padding-bottom: 20px;

                        >.biaoti {
                            color: #fff;
                            font-size: 22px;
                            margin: 0;
                            text-align: left;
                            margin: 15px 0 10px 10px;
                        }

                        >.neirong {
                            color: #fff;
                            margin: 0 10px 10px 10px;
                            font-size: 12px;
                            text-align: left;
                        }

                        .qingjin {
                            width: 35px;
                            height: 35px;
                            background-color: #CEAF59;
                            border-radius: 50%;
                            position: relative;
                            left: 85%;

                            &:hover {
                                background-color: red;
                            }

                            a {
                                text-decoration: none;
                                color: #fff;
                                line-height: 35px;
                                font-size: 12px;
                            }
                        }
                    }
                }
            }
        }

    }
}
</style>